<template>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="loginForm">
        <FormItem prop="userName">
            <Input prefix="ios-contact" v-model="form.userName" placeholder="请输入用户名"/>
        </FormItem>
        <FormItem prop="password">
            <Input prefix="md-lock" icon type="password" v-model="form.password" placeholder="请输入密码"/>
        </FormItem>
        <FormItem prop="code" style="width:234px!important">
            <Input prefix="md-lock" icon v-model="form.code" placeholder="请输入验证码"/>
            <img class="login-img" @click="handleChangImg" ref="codeImg">
        </FormItem>
        <FormItem>
            <Button
                @click="handleSubmit"
                type="primary"
                :loading="loading"
                style="width:100%;height:40px;font-size:15px;background:#189f93"
            >登&nbsp;&nbsp;&nbsp;录</Button>
        </FormItem>
    </Form>
</template>
<script>
export default {
    name: 'LoginForm',
    props: {
        /* 验证数据不为空 */
        userNameRules: {
            type: Array,
            default: () => {
                return [{ required: true, message: '账号不能为空', trigger: 'blur' }];
            }
        },
        passwordRules: {
            type: Array,
            default: () => {
                return [{ required: true, message: '密码不能为空', trigger: 'blur' }];
            }
        },
        codeRules: {
            type: Array,
            default: () => {
                return [{ required: true, message: '验证码不能为空', trigger: 'blur' }];
            }
        },
        /* 加载 */
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: {
                userName: 'admin', // 用户名
                password: '', //密码
                code: '' //验证码
            },
            url: ''
        };
    },
    computed: {
        rules() {
            return {
                userName: this.userNameRules, //用户名
                password: this.passwordRules, //密码
                code: this.codeRules //验证码
            };
        }
    },
    methods: {
        /* 登录 */
        handleSubmit() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.$emit('on-success-valid', {
                        userName: this.form.userName,
                        password: this.form.password,
                        code: this.form.code
                    });
                }
            });
        },
        handleChangImg() {
            this.$refs.codeImg.src = '/api/Login/GetAuthCode?time=' + Math.random();
        }
    },
    mounted() {
        this.$refs.codeImg.src = '/api/Login/GetAuthCode?time=' + Math.random();
    }
};
</script>
 <style scoped>
.loginForm >>> input {
    height: 40px;
    font-size: 16px;
}
.loginForm >>> i {
    height: 40px;
    line-height: 40px;
}
</style>
<style lang="less" scoped>
.login-img {
    position: absolute;
    top: 0px;
    right: -123px;
    cursor: pointer;
    width: 106px;
}
</style>
